<template>
	<view class="container">
		<view class="header fade-in">
			<text class="title">营销游戏</text>
			<text class="subtitle">参与游戏赢取好礼</text>
		</view>
		
		<view class="games-grid">
			<view class="game-item" v-for="(game, index) in games" :key="index" 
				@click="navigateToGame(game.path)"
				:class="['fade-in', 'bounce']"
				:style="{ animationDelay: index * 0.1 + 's' }">
				<image :src="game.icon" mode="aspectFit" class="game-icon"></image>
				<view class="game-info">
					<text class="game-name">{{game.name}}</text>
					<text class="game-desc">{{game.description}}</text>
				</view>
				<view class="game-status" :class="game.status">
					<text>{{game.statusText}}</text>
				</view>
			</view>
		</view>
		
		<view class="rules fade-in">
			<text class="rules-title">活动规则</text>
			<view class="rules-content">
				<text>1. 每个游戏每日参与次数有限</text>
				<text>2. 获得奖品后请在24小时内领取</text>
				<text>3. 部分游戏需要消耗积分参与</text>
				<text>4. 活动最终解释权归商家所有</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { batchAnimate, optimizeScroll, checkAnimationPerformance } from '/static/utils/animation.js'

// 游戏列表
const games = ref([
	{
		name: '火锅小店',
		description: '经营自己的火锅店',
		icon: '/static/images/games/shop.png',
		path: '/pages/games/shop',
		status: 'active',
		statusText: '进行中'
	},
	{
		name: '火锅寻宝',
		description: 'AR实景寻宝赢大奖',
		icon: '/static/images/games/treasure.png',
		path: '/pages/games/treasure',
		status: 'active',
		statusText: '进行中'
	},
	{
		name: '幸运大转盘',
		description: '转动转盘赢取大奖',
		icon: '/static/images/games/wheel.png',
		path: '/pages/games/wheel',
		status: 'active',
		statusText: '进行中'
	},
	{
		name: '砸金蛋',
		description: '砸开金蛋赢取惊喜',
		icon: '/static/images/games/egg.png',
		path: '/pages/games/egg',
		status: 'active',
		statusText: '进行中'
	},
	{
		name: '刮刮乐',
		description: '刮开涂层赢取奖品',
		icon: '/static/images/games/scratch.png',
		path: '/pages/games/scratch',
		status: 'active',
		statusText: '进行中'
	},
	{
		name: '集福卡',
		description: '集齐福卡赢取大奖',
		icon: '/static/images/games/cards.png',
		path: '/pages/games/cards',
		status: 'active',
		statusText: '进行中'
	},
	{
		name: '摇一摇',
		description: '摇动手机赢取奖品',
		icon: '/static/images/games/shake.png',
		path: '/pages/games/shake',
		status: 'active',
		statusText: '进行中'
	},
	{
		name: '签到抽奖',
		description: '每日签到赢取奖励',
		icon: '/static/images/games/sign.png',
		path: '/pages/games/sign',
		status: 'active',
		statusText: '进行中'
	},
	{
		name: '火锅食材园',
		description: '种植食材打造美味火锅',
		icon: '/static/images/games/farm.png',
		path: '/pages/games/farm',
		status: 'active',
		statusText: '进行中'
	}
])

// 跳转到游戏页面
const navigateToGame = (path) => {
	uni.navigateTo({
		url: path
	})
}

// 页面加载时优化动画性能
onMounted(() => {
	// 优化滚动性能
	optimizeScroll(document.querySelector('.container'))
	
	// 批量处理游戏列表动画
	const gameItems = document.querySelectorAll('.game-item')
	batchAnimate(gameItems, 'fade-in', 100)
	
	// 检测动画性能
	checkAnimationPerformance()
})
</script>

<style>
@import '/static/styles/animations.css';

.container {
	padding: 20rpx;
	background-color: #F5F5F5;
	min-height: 100vh;
	/* 添加硬件加速 */
	transform: translateZ(0);
	backface-visibility: hidden;
	perspective: 1000;
}

.header {
	padding: 40rpx 20rpx;
	text-align: center;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.subtitle {
	font-size: 24rpx;
	color: #666;
}

.games-grid {
	padding: 20rpx;
}

.game-item {
	display: flex;
	align-items: center;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	transition: transform 0.3s ease;
	/* 添加硬件加速 */
	transform: translateZ(0);
	backface-visibility: hidden;
	will-change: transform;
}

.game-item:active {
	transform: scale(0.98);
}

.game-icon {
	width: 100rpx;
	height: 100rpx;
	margin-right: 20rpx;
}

.game-info {
	flex: 1;
}

.game-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 8rpx;
	display: block;
}

.game-desc {
	font-size: 24rpx;
	color: #666;
}

.game-status {
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.game-status.active {
	color: #D02B29;
	background-color: #FFE4E4;
}

.game-status.ended {
	color: #999;
	background-color: #F5F5F5;
}

.rules {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 30rpx;
	margin: 20rpx;
}

.rules-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.rules-content {
	font-size: 26rpx;
	color: #666;
	line-height: 1.8;
}

.rules-content text {
	display: block;
}
</style> 